<template>
  <div>
    <div
      class="example"
      :style="form.selectType == 1 ? `background-image: url('${backImage}');` : `background-color: ${backColor};`"
      alt="backImage"
      ref="capture"
    >
      <template v-if="!showLoading">
        <img
          :src="personImage"
          alt="personImage"
          :style="`transform: rotate(${rotate}deg) scale(${scale}) translate(${series.x}px, ${series.y}px);`"
        />
      </template>
      <template v-else>
        <div class="picloading">正在进行人像切割，请稍后...</div>
        <div class="picloading">这可能会花费你的几分钟...</div>
      </template>
    </div>
    <div class="container">
      <el-form ref="form" :model="form" label-width="80px" v-if="showContainer">
        <el-form-item label="人像图片">
          <UploadImage @urlChange="e => imageChange(e, 'personImage')" />
        </el-form-item>

        <div v-if="personImage" style="padding-right: 20px;">
          <el-form-item label="旋转">
            <el-slider :show-tooltip="false" v-model="rotate" :min="0" :max="360"></el-slider>
          </el-form-item>
          <el-form-item label="放大缩小">
            <el-slider
              :show-tooltip="false"
              v-model="scale"
              :min="0.1"
              :max="10"
              :step="0.05"
              @change="scaleChange"
            ></el-slider>
          </el-form-item>
          <el-form-item label="坐标">
            x坐标:
            <el-slider :show-tooltip="false" v-model="series.x" :min="0" :max="360"></el-slider>
            y坐标：
            <el-slider :show-tooltip="false" v-model="series.y" :min="0" :max="360"></el-slider>
          </el-form-item>
        </div>

        <el-form-item label="背景类型">
          <el-select v-model="form.selectType" style="width: 100px;">
            <el-option :value="1" label="图片"></el-option>
            <el-option :value="2" label="颜色"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择背景">
          <UploadImage v-if="form.selectType == 1" @urlChange="e => imageChange(e, 'backImage')" />
          <ColorPicker v-else v-model="backColor" @change="colorChange" />
        </el-form-item>

        <el-form-item label="提示">
          <div class="tips">
            * 图片格式：JPEG、JPG、PNG（不支持8位、16位、64位PNG）、BMP、WEBP。
            <br />* 图像大小：输入图像大小不超过3M。
            <br />* 图像分辨率：分辨率要求小于1280×1280像素。
            <br />* URL地址中不能包含中文字符。
            <br />* 最终解释权归 <a href="https://gitee.com/HeiGes" target="_block">glack</a> 所有。
            <br />
          </div>
        </el-form-item>

        <el-form-item style="position:fixed;bottom:0;left:0;z-index:10000;">
          <el-button type="primary" @click="submit" class="submit">生成图片</el-button>
          <el-button type="default" @click="init" class="submit">初始化</el-button>
        </el-form-item>
      </el-form>
      <el-button v-else @click="showContainer = true">图片属性配置</el-button>

      <el-form ref="form" label-width="80px">
        <el-form-item label="生成结果" v-if="imageResult">
          <el-image :src="imageResult" class="saveimage"></el-image>
          <div class="tips" style="margin-top: 0;">* 长按图片保存</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import html2canvas from "html2canvas";
import { Form, FormItem, ColorPicker } from "element-ui";
// import { Form, FormItem, ColorPicker, Loading } from "element-ui";
import UploadImage from "../UploadImage";

export default {
  data() {
    return {
      form: {
        bgcolor: "transparent",
        backImage: "http://glack.oss-cn-shanghai.aliyuncs.com/dsfxfsaf.jpg",
        selectType: 1,
      },
      pv_total: 0,
      colorValue: "",
      personImage:
        "http://glack.oss-cn-shanghai.aliyuncs.com/1612605057000.jpg",
      backImage: "http://glack.oss-cn-shanghai.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210206174837.jpg",
      backColor: '#A33F3F',
      imageResult: '',

      rotate: 0,
      scale: 2.5,
      series: {
        x: 50,
        y: 43
      },

      showContainer: true,
      showLoading: false

    };
  },
  methods: {
    submit() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      
      let base64urlPersonImage = this.getBase64Image(this.personImage)
      let base64urlBackImage = this.getBase64Image(this.backImage)

      html2canvas(this.$refs.capture, {
        allowTaint: false,
        useCORS: true
      }).then(canvas => {
        let canvas2 = document.body.appendChild(canvas);
        canvas2.style = "display: none;";

        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        this.imageResult = image.src;
      });
    },
    async incrementPv() {
      const res = await axios.get("starpapi/counter");
      this.pv_total = res.data.data.num;
    },
    colorChange(e) {
      // this.backImage = "";
      this.backColor = e;
    },
    async imageChange(e, key){
      try {
        this.showLoading = true
        switch (key) {
          case 'personImage':
            let res
              res = await axios.post("starpapi/getstarphoto", { starUrl: e.data.data.url });
            this[key] = res.data.url;
            break;
          case 'backImage':
            this[key] = e.data.data.url
            break;
          default:
            break;
        }
        this.showLoading = false
      } catch (error) {
        this.showLoading = false
      }
      
    },
    getBase64Image(src) {
      let img = document.createElement("img"),
        dataURL = "";
      img.src = src;
      img.crossOrigin = "Anonymous";
      img.onload = () => {
        var canvas = document.createElement("canvas");
        canvas.style = "display: none;";
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        dataURL = canvas.toDataURL();
      }
      return dataURL
    },
    init(){
      this.colorValue = "";
      this.personImage =
        "http://glack.oss-cn-shanghai.aliyuncs.com/1612605057000.jpg";
      this.backImage = "http://glack.oss-cn-shanghai.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210206174837.jpg";
      this.backColor = '#A33F3F';
      this.imageResult = '';
      this.rotate = 0;
      this.scale = 2.5;
      this.series = {
        x: 50,
        y: 43
      };
    },
    scaleChange(e){
      console.log(e, 'eee')
    },
  },
  mounted() {
    this.incrementPv();
  },
  components: {
    ColorPicker,
    UploadImage
  }
};
</script>

<style >
.example {
  width: 100%;
  height: 270px;
  background-size: 100% 100%;
  overflow: hidden;
  background-repeat: no-repeat;
}
.example img {
  width: 150px;
}
.noBackImage {
  background-image: none;
}
.submit {
  margin-top: 10px;
}
.saveimage {
  width: 80%;
  margin-top: 10px;
}
.tips {
  color: #afafaf;
  font-size: 12px;
  line-height: 20px;
  margin-top: 10px;
}
.container {
  padding: 0 10px 100px 10px;
}
.el-form {
  margin-top: 10px;
}
.picloading{
  color: #bbb;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
</style>
